<template>
  <div class="basic">
    <div class="top-info">
      <div
        v-for="(item, index) in infoList"
        :key="index"
        style="position: relative"
      >
        <img :src="require('@/assets/pagesImg/' + item.imgSrc)" alt="" />
        <div class="typeNum">
          <p>{{ item.title }}</p>
          <!-- <h1 :class="item.class">{{ item.number }}</h1> -->
          <h1
            style="
              font-size: 30px;
              font-family: Arial-Bold, Arial;
              font-weight: bold;
              color: #13213b;
            "
          >
            {{ item.number }}
          </h1>
        </div>
        <span style="position: relative; bottom: 30px; left: 0px">
          <img
            :src="require('@/assets/pagesImg/' + item.mxSrc)"
            style="width: 46px; height: 23px; cursor: pointer"
            alt=""
            @click="detailMxDiaLog(item)"
          />
        </span>
      </div>
    </div>
    <!-- <div class="eachats"><eacharts :option="option" /></div> -->
    <div class="center">
      <div
        style="width: 55%; height: auto; padding: 10px; box-sizing: border-box"
      >
        <div style="display: flex; justify-content: space-between">
          <p class="title"><span></span>预警信息</p>
          <p class="changeDate">
            <span
              v-for="(item, index) in date1"
              :key="index"
              @click="change1(index)"
              :class="item.isActive ? 'active' : 'nuActive'"
              style="cursor: pointer"
            >
              {{ item.time }}
            </span>
          </p>
        </div>
        <div id="yjxx" style="height: 100%; width: 100%">
          <div class="yj top">
            <div v-for="(item, index) in yjxx" :key="index">
              <span>{{ item.title }}</span>
              <br />
              <span>{{ item.num }}</span>
            </div>
          </div>
          <div class="yj">
            <div
              v-for="(item, index) in yjType"
              :key="index"
              style="
                width: 158px;
                height: 68px;
                padding: 10px;
                box-sizing: border-box;
                border-radius: 6px;
              "
            >
              <span
                style="
                  display: inline-block;
                  /* border: 1px red solid; */
                  height: 25px;
                  width: 50px;
                  line-height: 25px;
                  margin-right: 10px;
                  cursor: pointer;
                "
                >{{ item.title }}</span
              >
              <span
                style="
                  display: inline-block;
                  width: 0px;
                  height: 36px;
                  opacity: 1;
                  border: 0.5px solid #ffffff;
                "
              ></span>
              <span
                style="
                  flex: 1;
                  line-height: 50px;
                  font-size: 24px;
                  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                  font-weight: bold;
                  color: #ffffff;
                "
                >{{ item.num }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 10px; box-sizing: border-box">
        <div style="display: flex; justify-content: space-between">
          <p class="title"><span></span>图文上报</p>
          <p class="changeDate">
            <span
              v-for="(item, index) in date2"
              :key="index"
              @click="change2(index)"
              :class="item.isActive ? 'active' : 'nuActive'"
              style="cursor: pointer"
            >
              {{ item.time }}
            </span>
          </p>
        </div>
        <div style="overflow-x: scroll">
          <div id="dgl"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div>
        <dglpm></dglpm>
      </div>
      <div style="padding: 10px; box-sizing: border-box">
        <div style="display: flex; justify-content: space-between">
          <p class="title"><span></span>学校访客异常人员</p>
          <p class="changeDate">
            <span
              v-for="(item, index) in date3"
              :key="index"
              @click="change3(index)"
              :class="item.isActive ? 'active' : 'nuActive'"
              style="cursor: pointer"
            >
              {{ item.time }}
            </span>
          </p>
        </div>
        <div style="overflow-x: scroll">
          <div id="abnormal"></div>
        </div>
      </div>
      <div style="padding: 10px; box-sizing: border-box">
        <div style="display: flex; justify-content: space-between">
          <p class="title"><span></span>学校访客性别比对</p>
          <p class="changeDate">
            <span
              v-for="(item, index) in date4"
              :key="index"
              @click="change4(index)"
              :class="item.isActive ? 'active' : 'nuActive'"
              style="cursor: pointer"
            >
              {{ item.time }}
            </span>
          </p>
        </div>
        <div id="warning"></div>
      </div>
    </div>
    <!-- 明细弹窗 -->
    <div>
      <detailMx
        :visible="visible"
        @handel="handel"
        @nextPage="nextPage"
        @resetList="resetList"
        @searchName="searchName"
        @SizeChange="SizeChange"
        @loadings="loadings"
        @loadingClose="loadingClose"
        @handleCloseImportant="handleCloseImportant"
        :tableList="tableList"
        :dataList="dataList"
        :currentPage="currentPage"
        :pageSize="pageSize"
        :formData="formData"
        :loading="loading"
      />
    </div>
  </div>
</template>
<script>
import detailMx from "@/components/detailMx";
import {
  total,
  clicmData,
  imageTextData,
  visitorDataLog,
  visitorRatio,
} from "@/api/dataScreeen"; // 综合数据展板信息接口文件
import {
  todaySignNumbers,
  allSignsUnUsers,
  allSignsNumbers,
  todaySignUsers,
  todaySignsNumber,
  jrdwkSchool,
} from "@/api/mx";
// import eacharts from "@/components/eacharts/index.vue";
import { Loading } from "element-ui";
import dglpm from "@/components/dglpm/index.vue";
let bgColor = "#fff";
let color = ["#126BFF", "#FF4444", "#FFC005", "#FF515A", "#8B5CFF", "#00CA69"];

export default {
  name: "BasicInformation",
  components: { dglpm, detailMx },
  data() {
    return {
      dataList: {
        count: 20,
        res: [],
      },
      visible: false,
      loading: true,
      currentPage: 1,
      pageSize: 20,
      tableList: {
        titel: "",
      },
      topImg: {
        one: "8427",
        two: "8428",
        three: "8531",
        four: "8426",
        five: "8425",
      },
      itemInex: 0,
      date1: [
        {
          time: "今日",
          isActive: true,
          id: 0,
        },
        {
          time: "近7天",
          isActive: false,
          id: 6,
        },
        {
          time: "近30天",
          isActive: false,
          id: 29,
        },
      ],
      date2: [
        {
          time: "今日",
          isActive: true,
          id: 9,
        },
        {
          time: "近7天",
          isActive: false,
          id: 7,
        },
        {
          time: "近30天",
          isActive: false,
          id: 30,
        },
      ],
      date3: [
        {
          time: "今日",
          isActive: true,
          id: 6,
        },
        {
          time: "近7天",
          isActive: false,
          id: 7,
        },
        {
          time: "近30天",
          isActive: false,
          id: 30,
        },
      ],
      date4: [
        {
          time: "今日",
          isActive: true,
          id: 0,
        },
        {
          time: "近7天",
          isActive: false,
          id: 7,
        },
        {
          time: "近30天",
          isActive: false,
          id: 30,
        },
      ],
      // 预警信息
      yjxx: [
        {
          title: "警情总数量",
          num: null,
        },
        {
          title: "已处理警情",
          num: null,
        },
        {
          title: "未处理警情",
          num: null,
        },
      ],
      // 预警来源
      yjType: [
        {
          title: "小程序预警",
          num: "10",
        },
        {
          title: "报警主机",
          num: "7",
        },
        {
          title: "人像预警",
          num: "5",
        },
        {
          title: "车辆预警",
          num: "3",
        },
      ],
      //
      infoList: [
        {
          title: "学校总打卡数量",
          number: "0",
          imgSrc: "6769@2x (1).png",
          type: 0,
          // imgSrc: "@/",
          class: "a",
          mxSrc: "8427.png",
          // imgSrc: "/static/img/pagesImg/组 6769.png",
        },
        {
          title: "学校未打卡总数",
          type: 0,
          number: "0",
          imgSrc: "6769@2x (3).png",
          mxSrc: "8428.png",
          class: "b",
        },

        {
          title: "今日学校打卡总数",
          type: 0,
          number: "0",
          imgSrc: "6769@2x (5).png",
          mxSrc: "8531.png",
          class: "c",
        },
        {
          title: "今日总打卡人数",
          number: "0",
          mxSrc: "8426.png",
          imgSrc: "6769@2x (2).png",
          type: 1,

          class: "d",
        },
        {
          title: "今日总打卡次数",
          number: "0",
          mxSrc: "8425.png",
          imgSrc: "6769@2x (4).png",
          type: 1,
          class: "e",
        },
        {
          title: "今日未打卡学校总数",
          number: 0,
          mxSrc: "8425.png",
          imgSrc: "6769@2x (4).png",
          type: 2,
          class: "f",
        },
      ],
      schoolTile: [
        "学校名称",
        "学校类型",
        "法定代表人姓名",
        "所属区域",
        "所属派出所",
        "预警时间",
      ],
      warnList: [],
      school: {},
      option: {
        backgroundColor: "#FFFFFF",
        tooltip: {},
        grid: {
          top: "8%",
          left: "1%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "red",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#13213B",
                margin: 15,
              },
            },
            axisTick: {
              show: false,
            },
            data: [
              "幼儿园",
              "小学",
              "初中",
              "高中",
              "职业高中",
              "九年一贯制",
              // "十二年一贯制",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                // color: 'red'
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "red",
              },
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#13213B",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: false,
            },

            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x1: 0,
                  y1: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2785FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00F6FF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [200, 382, 102, 267, 186, 315, 316],
          },
        ],
      },
      // 学校访客异常人员
      echartData: [],
      // 预警信息参数
      yjParmas: {
        day: 0,
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      },
      // 图文上报信息 数据
      imgText: {
        day: 9,
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      },
      imgDate: [],
      imgNum: [],
      // 学校访客异常人员
      fkParmas: {
        day: 6,
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      },
      // 学校访客性别对比
      fkSexParmas: {
        day: 0,
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      },
      zanbi: {
        man_ratio: 46.7,
        woman_ratio: 53.3,
      },
      pamas: {
        dwmc: "",
        token: JSON.parse(localStorage.getItem("userInfo")).token,
        // begin_time: "",
        // end_time: "",
        page: 1,
        pagesize: 20,
      },
      formData: {
        schoolName: "",
        times: "",
      },
    };
  },
  mounted() {
    this.initData(); // 初始化打卡数量信息
    this.createChart();
    this.createImageBitmap(); // // 图文上报图表
    this.initYjxx(); // // 初始化预警信息
    // setTimeout(() => {
    this.initFkxx(); // 初始化访客人员数量
    // }, 0);
    this.initSex(this.zanbi); // 初始化学校访客男女比例
  },
  methods: {
    async initData() {
      let that = this;
      await jrdwkSchool(this.pamas).then((res) => {
        console.log(res);
        if (res.code == 200) {
          console.log(res);
          that.infoList[5].number = res.data.count;
        } else {
          this.$message.error(res.message);
        }
      });
      // 打卡数量信息
      await total({
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          that.infoList[0].number = res.data.xuexiaoshuliang; // 学校总打卡次数
          that.infoList[1].number = res.data.weidakaxuexiaoshuliang; //学校未打卡总数
          that.infoList[2].number = res.data.jinridakaxuexiao; // 今日学校打卡总数
          that.infoList[3].number = res.data.jinridakarenshu; //今日总打卡人数
          that.infoList[4].number = res.data.jinridakacishu;
        }
      });
    },
    detailMxDiaLog(e) {
      // this.$message({
      //   showClose: true,
      //   message: "",
      //   type: "success",
      // });
      this.visible = true;
      console.log(e);
      let list = null;
      let that = this;
      that.pamas.dwmc = "";
      that.formData.schoolName = "";
      this.$nextTick(() => {
        that.currentPage = 1;
        that.pageSize = 20;
      });

      if (e.class == "a") {
        console.log("今日总打卡人数");
        this.tableList = e;

        allSignsNumbers(that.pamas)
          .then((res) => {
            // console.log(res);
            if (res.code == 200) {
              list = res.data;
              list.res.forEach((item) => {
                item.create_time = that
                  .$moment(item.create_time * 1000)
                  .format("YYYY-MM-DD HH:mm:ss");
              });
              this.$nextTick(() => {
                this.dataList = list;
                this.loading = false;
              });
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error("响应超时");
          });
      } else if (e.class == "b") {
        this.tableList = e;

        allSignsUnUsers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            this.loading = false;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            this.$nextTick(() => {
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (e.class == "c") {
        this.tableList = e;

        //  http://120.211.58.75:50003/admin.index/allSignsUnUsers
        todaySignsNumber(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            this.loading = false;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            this.$nextTick(() => {
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (e.class == "d") {
        this.tableList = e;

        todaySignUsers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            this.loading = false;

            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            this.$nextTick(() => {
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (e.class == "e") {
        this.tableList = e;
        todaySignNumbers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            this.loading = false;

            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            this.$nextTick(() => {
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (e.class == "f") {
        this.tableList = e;
        jrdwkSchool(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            this.loading = false;
            this.$nextTick(() => {
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
      // loadingInstance.close();
    },
    Confirm() {
      this.visible = false;
    },
    handel(val) {
      this.currentPage = 1;
      this.pageSize = 20;

      this.pamas = {
        dwmc: "",
        token: JSON.parse(localStorage.getItem("userInfo")).token,
        page: 1,
        pagesize: 20,
      };
      this.formData.schoolName = "";
      this.formData.times = "";
      this.dataList = {};
      // this.search(val);
      this.visible = val.show;
      this.loading = true;
    },
    nextPage(val) {
      // 下一页
      this.pamas.page = val.val;
      this.currentPage = val.val;

      this.search(val);
      // if (val.title == "今日总打卡人数")
      // if (val.title == "学校总打卡数量") {
      //   console.log("今日总打卡人数");
      //   allSignsNumbers(that.pamas).then((res) => {
      //     // console.log(res);
      //     if (res.code == 200) {
      //       list = res.data;
      //       list.res.forEach((item) => {
      //         item.create_time = that
      //           .$moment(item.create_time * 1000)
      //           .format("YYYY-MM-DD HH:mm:ss");
      //       });
      //       loadingInstance.close();
      //       this.$nextTick(() => {
      //         // this.tableList = e;
      //         this.dataList = list;
      //       });
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
      // } else if (val.title == "学校未打卡总数") {
      //   allSignsUnUsers(this.pamas).then((res) => {
      //     console.log(res);
      //     if (res.code == 200) {
      //       list = res.data;
      //       list.res.forEach((item) => {
      //         item.create_time = that
      //           .$moment(item.create_time * 1000)
      //           .format("YYYY-MM-DD HH:mm:ss");
      //       });
      //       loadingInstance.close();

      //       this.$nextTick(() => {
      //         // this.tableList = e;
      //         this.dataList = list;
      //       });
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
      // } else if (val.title == "今日学校打卡总数") {
      //   //  http://120.211.58.75:50003/admin.index/allSignsUnUsers
      //   allSignsUnUsers(this.pamas).then((res) => {
      //     console.log(res);
      //     if (res.code == 200) {
      //       list = res.data;
      //       list.res.forEach((item) => {
      //         item.create_time = that
      //           .$moment(item.create_time * 1000)
      //           .format("YYYY-MM-DD HH:mm:ss");
      //       });
      //       loadingInstance.close();

      //       this.$nextTick(() => {
      //         // this.tableList = e;
      //         this.dataList = list;
      //       });
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
      // } else if (val.title == "今日总打卡人数") {
      //   todaySignUsers(this.pamas).then((res) => {
      //     console.log(res);
      //     if (res.code == 200) {
      //       list = res.data;
      //       list.res.forEach((item) => {
      //         item.create_time = that
      //           .$moment(item.create_time * 1000)
      //           .format("YYYY-MM-DD HH:mm:ss");
      //       });
      //       loadingInstance.close();

      //       this.$nextTick(() => {
      //         // this.tableList = e;
      //         this.dataList = list;
      //       });
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
      // } else if (val.title == "今日总打卡次数") {
      //   todaySignNumbers(this.pamas).then((res) => {
      //     console.log(res);
      //     if (res.code == 200) {
      //       list = res.data;
      //       list.res.forEach((item) => {
      //         item.create_time = that
      //           .$moment(item.create_time * 1000)
      //           .format("YYYY-MM-DD HH:mm:ss");
      //       });
      //       loadingInstance.close();

      //       this.$nextTick(() => {
      //         // this.tableList = e;
      //         this.dataList = list;
      //       });
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
      // }
    },
    // 搜索条件
    search(val) {
      let loadingInstance = this.$Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      let list = null;
      let that = this;
      if (val.title == "学校总打卡数量") {
        console.log("今日总打卡人数");
        allSignsNumbers(that.pamas).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();
            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "学校未打卡总数") {
        allSignsUnUsers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            // list.res.forEach((item) => {
            //   item.create_time = that
            //     .$moment(item.create_time * 1000)
            //     .format("YYYY-MM-DD HH:mm:ss");
            // });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日学校打卡总数") {
        //  http://120.211.58.75:50003/admin.index/allSignsUnUsers
        todaySignsNumber(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日总打卡人数") {
        todaySignUsers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日总打卡次数") {
        todaySignNumbers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日未打卡学校总数") {
        jrdwkSchool(val.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;

            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },

    // 重置
    resetList(val) {
      console.log(val);
      this.formData.schoolName = "";
      this.formData.times = "";
      this.pamas = {
        dwmc: "",
        token: JSON.parse(localStorage.getItem("userInfo")).token,
        // begin_time: "",
        // end_time: "",
        page: 1,
        pagesize: 20,
      };
      this.search(val);
    },
    // 根据学校名搜索
    searchName(val) {
      let loadingInstance = this.$Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      val.pamas.page = 1;
      val.pamas.pagesize = 20;
      console.log(val);
      console.log(val.pamas);

      // this.pamas = {
      //   dwmc: val.schoolName,
      //   token: JSON.parse(localStorage.getItem("userInfo")).token,
      //   page: 1,
      //   pagesize: 20,
      // };
      this.currentPage = 1;
      let list = null;
      let that = this;
      if (val.title == "学校总打卡数量") {
        console.log("今日总打卡人数");
        allSignsNumbers(val.pamas).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();
            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "学校未打卡总数") {
        allSignsUnUsers(val.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            // list.res.forEach((item) => {
            //   item.create_time = that
            //     .$moment(item.create_time * 1000)
            //     .format("YYYY-MM-DD HH:mm:ss");
            // });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日学校打卡总数") {
        //  http://120.211.58.75:50003/admin.index/allSignsUnUsers
        todaySignsNumber(val.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日总打卡人数") {
        todaySignUsers(val.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日总打卡次数") {
        todaySignNumbers(val.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日未打卡学校总数") {
        jrdwkSchool(val.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;

            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    SizeChange(val) {
      console.log(val);
      let loadingInstance = this.$Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      // 下一页
      console.log(val.val);
      console.log(val.title);
      this.pamas.pagesize = val.val;
      this.$nextTick(() => {
        this.pageSize = val.val;
      });
      let list = null;
      let that = this;
      if (val.title == "学校总打卡数量") {
        console.log("今日总打卡人数");
        allSignsNumbers(that.pamas).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();
            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "学校未打卡总数") {
        allSignsUnUsers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日学校打卡总数") {
        //  http://120.211.58.75:50003/admin.index/allSignsUnUsers
        todaySignsNumber(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日总打卡人数") {
        todaySignUsers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日总打卡次数") {
        todaySignNumbers(this.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;
            list.res.forEach((item) => {
              item.create_time = that
                .$moment(item.create_time * 1000)
                .format("YYYY-MM-DD HH:mm:ss");
            });
            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val.title == "今日未打卡学校总数") {
        jrdwkSchool(val.pamas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            list = res.data;

            loadingInstance.close();

            this.$nextTick(() => {
              // this.tableList = e;
              this.dataList = list;
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    // @loading="loading"
    //     @loadingClose = "loadingClose"
    loadingClose() {
      this.loading = false;
    },
    loadings(e) {
      console.log(e);
      this.loading = true;
    },
    handleCloseImportant() {
      console.log("999999999999");
      this.formData.times = "";
      this.formData.schoolName = "";
      this.pamas = {
        dwmc: "",
        token: JSON.parse(localStorage.getItem("userInfo")).token,
        page: 1,
        pagesize: 20,
      };
      console.log(this.formData);
    },
    // 图文上报图表
    createImageBitmap(index) {
      let that = this;
      const main = this.$echarts.init(document.getElementById("dgl"));

      const option = {
        backgroundColor: "#FFFFFF",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
            label: {
              width: 100,
            },
          },
          formatter: function (params) {
            console.log(params[0].data);
            return `<span style=" font-weight: bold;width:100px;display:inline-block;">今日数据：${params[0].data}</span>`;
          },
        },
        grid: {
          top: "8%",
          left: "5%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            nameLocation: "center",
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              nameLocation: "center",
              // backgroundColor: "red",
              lineStyle: {
                color: "#00B3FE",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              // rotate: 45, // 旋转角度
              interval: 0, // 强制显示所有标签
              textStyle: {
                // color: "#13213B",
                color: "#13213B",
                borderColor: "red",
                // borderWidth: 1,
                // width: 100,
                // overflow: "breakAll",
                padding: [10, 0, 10, 0],
              },
              formatter: function (params) {
                let newParamsName = "";
                const paramsNameNumber = params.length; // 文字总长度
                const provideNumber = 8; //一行显示几个字
                const rowNumber = Math.ceil(paramsNameNumber / provideNumber);

                if (paramsNameNumber > provideNumber) {
                  for (let p = 0; p < rowNumber; p++) {
                    const start = p * provideNumber;
                    const end = start + provideNumber;
                    const tempStr =
                      p === rowNumber - 1
                        ? params.substring(start, paramsNameNumber)
                        : params.substring(start, end) + "\n";
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
            axisTick: {
              show: false,
            },
            data: this.imgDate,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 300,
            // splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0, 179, 254, 1)",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                color: "#13213B",
              },
              rotate: 45,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 16,
            barGap: "10",
            barCategoryGap: "10",
            tooltip: {
              show: true,
            },

            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x1: 0,
                  y1: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2785FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00F6FF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: this.imgNum,
          },
        ],
      };
      this.date2.forEach((item, i) => {
        if (i == index) {
          console.log(item.id);
          this.imgText.day = item.id;
          imageTextData(this.imgText).then((res) => {
            console.log(res);
            res.forEach((item) => {
              console.log(item);
              that.imgDate.push(item.date);
              that.imgNum.push(item.count);
            });
            // console.log(this.imgDate);
            // console.log(this.imgNum);
            main.setOption(option);
          });
          item.isActive = !item.isActive;
        } else if (i != index) {
          item.isActive = false;
        }
      });
    },
    // 初始化访客人员信息
    changeFxx(index) {
      const abnormal = this.$echarts.init(document.getElementById("abnormal"));
      // ==========+
      this.date3.forEach((item, i) => {
        if (i == index) {
          console.log(item.id);
          this.fkParmas.day = item.id;
          console.log(this.fkParmas);
          visitorDataLog(this.fkParmas).then((res) => {
            if (res) {
              console.log(res);
              this.echartData = res;
              // setTimeout(() => {
              let xAxisData = this.echartData.map((v) => v.date);
              let yAxisData1 = this.echartData.map((v) => v.abnormal_number);
              // [100, 138, 350, 173, 180, 150, 180, 230]
              let yAxisData2 = this.echartData.map((v) => v.normal_number);
              // [233, 233, 200, 180, 199, 233, 210, 180]
              const hexToRgba = (hex, opacity) => {
                let rgbaColor = "";
                let reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                  rgbaColor = `rgba(${parseInt(
                    "0x" + hex.slice(1, 3)
                  )},${parseInt("0x" + hex.slice(3, 5))},${parseInt(
                    "0x" + hex.slice(5, 7)
                  )},${opacity})`;
                }
                return rgbaColor;
              };
              const optionAbnormal = {
                backgroundColor: bgColor,
                color: color,
                legend: {
                  right: 10,
                  top: 10,

                  icon: "circle",
                  itemGap: 10,
                  // backgroundColor: "#fff",
                  // itemStyle: {
                  //   borderWidth: 2, // 设置边框宽度
                  //   borderColor: "red", // 设置边框颜色
                  //   // borderType: "dashed", // 设置边框类型，可选值有'solid'（实线）和'dashed'（虚线）
                  //   borderRadius: 10, // 设置边框圆角半径
                  //   color: "white", // 设置图标的填充颜色
                  //   emptyBorderColor: "black", // 设置空心圆的边框颜色
                  //   emptyBorderWidth: 1, // 设置空心圆的边框宽度
                  // },
                  data: ["正常", "异常"],
                },
                tooltip: {
                  trigger: "axis",
                  formatter: function (params) {
                    let html = "";
                    params.forEach((v) => {
                      html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.seriesName}
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>
                `;
                    });

                    return html;
                  },
                  extraCssText:
                    "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                  axisPointer: {
                    type: "shadow",
                    shadowStyle: {
                      color: "#ffffff",
                      shadowColor: "rgba(225,225,225,1)",
                      shadowBlur: 5,
                    },
                  },
                },
                grid: {
                  left: "0%",
                  right: "0%",
                  bottom: "5%",
                  top: "7%",
                  height: "85%",
                  containLabel: true,
                  z: 22,
                },
                xAxis: [
                  {
                    type: "category",
                    nameLocation: "center",
                    boundaryGap: false,
                    axisLabel: {
                      formatter: "{value}",
                      rotate: 45,
                      textStyle: {
                        color: "#333",
                      },
                      subtextStyle: {
                        align: "center",
                      },
                    },
                    axisLine: {
                      lineStyle: {
                        color: "#D9D9D9",
                      },
                      onZero: false,
                    },
                    data: xAxisData,
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                    // name: "单位：万千瓦时",
                    axisLabel: {
                      textStyle: {
                        color: "#666",
                      },
                    },
                    nameTextStyle: {
                      color: "#666",
                      fontSize: 12,
                      lineHeight: 40,
                    },
                    splitLine: {
                      lineStyle: {
                        // type: "dashed",
                        color: "#E9E9E9",
                      },
                    },
                    axisLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                  },
                ],
                series: [
                  {
                    name: "正常",
                    type: "line",
                    smooth: false,
                    showSymbol: false,
                    zlevel: 3,
                    lineStyle: {
                      normal: {
                        // color: color[0],
                        // shadowBlur: 3,
                        // shadowColor: hexToRgba(color[0], 0.5),
                        // shadowOffsetY: 8,
                      },
                    },
                    areaStyle: {
                      normal: {
                        color: new this.$echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: hexToRgba(color[0], 0.3),
                            },
                            {
                              offset: 1,
                              color: hexToRgba(color[0], 0.1),
                            },
                          ],
                          false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10,
                      },
                    },
                    data: yAxisData1,
                  },
                  {
                    name: "异常",
                    type: "line",
                    smooth: false,
                    showSymbol: false,
                    zlevel: 3,
                    lineStyle: {
                      normal: {
                        // color: color[1],
                        // shadowBlur: 3,
                        // shadowColor: hexToRgba(color[1], 0.5),
                        // shadowOffsetY: 8,
                      },
                    },
                    areaStyle: {
                      normal: {
                        color: new this.$echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: hexToRgba(color[1], 0.3),
                            },
                            {
                              offset: 1,
                              color: hexToRgba(color[1], 0.1),
                            },
                          ],
                          false
                        ),
                        shadowColor: hexToRgba(color[1], 0.1),
                        shadowBlur: 10,
                      },
                    },
                    data: yAxisData2,
                  },
                ],
              };
              abnormal.setOption(optionAbnormal);
              window.addEventListener("resize", function () {
                abnormal.resize();
              });
            }
          });
          item.isActive = !item.isActive;
        } else if (i != index) {
          item.isActive = false;
        }
      });

      // }, 100);
    },
    // 初始化访客人员数量
    async initFkxx() {
      const abnormal = this.$echarts.init(document.getElementById("abnormal"));
      await visitorDataLog(this.fkParmas).then((res) => {
        if (res) {
          // console.log(res);
          this.echartData = res;
          // console.log(this.echartData);
          let xAxisData = this.echartData.map((v) => v.date);

          let yAxisData1 = this.echartData.map((v) => v.abnormal_number);

          let yAxisData2 = this.echartData.map((v) => v.normal_number);

          const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
              )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
          };
          const optionAbnormal = {
            backgroundColor: bgColor,
            color: color,
            legend: {
              right: 10,
              top: 10,

              icon: "circle",
              itemGap: 10,
              // backgroundColor: "#fff",
              // itemStyle: {
              //   borderWidth: 2, // 设置边框宽度
              //   borderColor: "red", // 设置边框颜色
              //   // borderType: "dashed", // 设置边框类型，可选值有'solid'（实线）和'dashed'（虚线）
              //   borderRadius: 10, // 设置边框圆角半径
              //   color: "white", // 设置图标的填充颜色
              //   emptyBorderColor: "black", // 设置空心圆的边框颜色
              //   emptyBorderWidth: 1, // 设置空心圆的边框宽度
              // },
              data: ["正常", "异常"],
            },
            tooltip: {
              trigger: "axis",

              formatter: function (params) {
                let html = "";
                params.forEach((v) => {
                  // console.log(v);
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.seriesName}
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>`;
                });
                return html;
              },
              extraCssText:
                "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
              axisPointer: {
                type: "shadow",
                shadowStyle: {
                  color: "#ffffff",
                  shadowColor: "rgba(225,225,225,1)",
                  shadowBlur: 5,
                },
              },
            },
            // 设置整体图表的位置
            grid: {
              left: "0%",
              right: "0%",
              bottom: "5%",
              top: "7%",
              height: "85%",
              containLabel: true,
              z: 22,
            },
            xAxis: [
              {
                type: "category",
                nameLocation: "center",
                boundaryGap: false,
                axisLabel: {
                  formatter: "{value}",
                  rotate: 45,
                  interval: 0,
                  textStyle: {
                    color: "#333",
                  },
                  subtextStyle: {
                    align: "center",
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#D9D9D9",
                  },
                  onZero: false,
                },
                data: xAxisData,
              },
            ],
            yAxis: [
              {
                type: "value",
                // name: "单位：万千瓦时",
                axisLabel: {
                  textStyle: {
                    color: "#666",
                  },
                },
                nameTextStyle: {
                  color: "#666",
                  fontSize: 12,
                  lineHeight: 40,
                },
                splitLine: {
                  lineStyle: {
                    // type: "dashed",
                    color: "#E9E9E9",
                  },
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "正常",
                type: "line",
                smooth: false,
                showSymbol: false,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    // color: color[0],
                    // shadowBlur: 3,
                    // shadowColor: hexToRgba(color[0], 0.5),
                    // shadowOffsetY: 8,
                  },
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[0], 0.3),
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[0], 0.1),
                        },
                      ],
                      false
                    ),
                    shadowColor: hexToRgba(color[0], 0.1),
                    shadowBlur: 10,
                  },
                },
                data: yAxisData1,
              },
              {
                name: "异常",
                type: "line",
                smooth: false,
                showSymbol: false,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    // color: color[1],
                    // shadowBlur: 3,
                    // shadowColor: hexToRgba(color[1], 0.5),
                    // shadowOffsetY: 8,
                  },
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[1], 0.3),
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[1], 0.1),
                        },
                      ],
                      false
                    ),
                    shadowColor: hexToRgba(color[1], 0.1),
                    shadowBlur: 10,
                  },
                },
                data: yAxisData2,
              },
            ],
          };
          abnormal.setOption(optionAbnormal);
          window.addEventListener("resize", function () {
            abnormal.resize();
          });
        }
      });
    },
    // 初始化学校访客男女比例
    initSex(data) {
      const warning = this.$echarts.init(document.getElementById("warning"));
      // ==============================
      var symbols = [
        "path://M18.2629891,11.7131596 L6.8091608,11.7131596 C1.6685112,11.7131596 0,13.032145 0,18.6237673 L0,34.9928467 C0,38.1719847 4.28388932,38.1719847 4.28388932,34.9928467 L4.65591984,20.0216948 L5.74941883,20.0216948 L5.74941883,61.000787 C5.74941883,65.2508314 11.5891201,65.1268798 11.5891201,61.000787 L11.9611506,37.2137775 L13.1110872,37.2137775 L13.4831177,61.000787 C13.4831177,65.1268798 19.3114787,65.2508314 19.3114787,61.000787 L19.3114787,20.0216948 L20.4162301,20.0216948 L20.7882606,34.9928467 C20.7882606,38.1719847 25.0721499,38.1719847 25.0721499,34.9928467 L25.0721499,18.6237673 C25.0721499,13.032145 23.4038145,11.7131596 18.2629891,11.7131596 M12.5361629,1.11022302e-13 C15.4784742,1.11022302e-13 17.8684539,2.38997966 17.8684539,5.33237894 C17.8684539,8.27469031 15.4784742,10.66467 12.5361629,10.66467 C9.59376358,10.66467 7.20378392,8.27469031 7.20378392,5.33237894 C7.20378392,2.38997966 9.59376358,1.11022302e-13 12.5361629,1.11022302e-13",
        "path://M28.9624207,31.5315864 L24.4142575,16.4793596 C23.5227152,13.8063773 20.8817445,11.7111088 17.0107398,11.7111088 L12.112691,11.7111088 C8.24168636,11.7111088 5.60080331,13.8064652 4.70917331,16.4793596 L0.149791395,31.5315864 C-0.786976655,34.7595013 2.9373074,35.9147532 3.9192135,32.890727 L8.72689855,19.1296485 L9.2799493,19.1296485 C9.2799493,19.1296485 2.95992025,43.7750224 2.70031069,44.6924335 C2.56498417,45.1567684 2.74553639,45.4852068 3.24205501,45.4852068 L8.704461,45.4852068 L8.704461,61.6700801 C8.704461,64.9659872 13.625035,64.9659872 13.625035,61.6700801 L13.625035,45.360657 L15.5097899,45.360657 L15.4984835,61.6700801 C15.4984835,64.9659872 20.4191451,64.9659872 20.4191451,61.6700801 L20.4191451,45.4852068 L25.8814635,45.4852068 C26.3667633,45.4852068 26.5586219,45.1567684 26.4345142,44.6924335 C26.1636859,43.7750224 19.8436568,19.1296485 19.8436568,19.1296485 L20.3966199,19.1296485 L25.2043926,32.890727 C26.1862111,35.9147532 29.9105828,34.7595013 28.9625083,31.5315864 L28.9624207,31.5315864 Z M14.5617154,0 C17.4960397,0 19.8773132,2.3898427 19.8773132,5.33453001 C19.8773132,8.27930527 17.4960397,10.66906 14.5617154,10.66906 C11.6274788,10.66906 9.24611767,8.27930527 9.24611767,5.33453001 C9.24611767,2.3898427 11.6274788,0 14.5617154,0 L14.5617154,0 Z",
        "path://M512 292.205897c80.855572 0 146.358821-65.503248 146.358821-146.358821C658.358821 65.503248 592.855572 0 512 0 431.144428 0 365.641179 65.503248 365.641179 146.358821 365.641179 227.214393 431.144428 292.205897 512 292.205897zM512 731.282359c-80.855572 0-146.358821 65.503248-146.358821 146.358821 0 80.855572 65.503248 146.358821 146.358821 146.358821 80.855572 0 146.358821-65.503248 146.358821-146.358821C658.358821 796.273863 592.855572 731.282359 512 731.282359z",
      ];
      var bodyMax = 100; //指定图形界限的值
      var labelSetting = {
        normal: {
          show: true,
          position: "bottom",
          offset: [0, 10],
          formatter: function (param) {
            return ((param.value / bodyMax) * 100).toFixed(0) + "%";
          },
          textStyle: {
            fontSize: 18,
            fontFamily: "Arial",
            color: "#686868",
          },
        },
      };

      var markLineSetting = {
        //设置标线
        symbol: "none",
        lineStyle: {
          normal: {
            opacity: 0.3,
          },
        },
        data: [
          {
            type: "max",
            label: {
              normal: {
                formatter: "max: {c}",
              },
            },
          },
          {
            type: "min",
            label: {
              normal: {
                formatter: "min: {c}",
              },
            },
          },
        ],
      };
      const options1 = {
        tooltip: {
          show: false, //鼠标放上去显示悬浮数据
        },
        grid: {
          // 整体位置
          // left: '20%',
          // right: '20%',
          top: "20%",
          bottom: "20%",
          containLabel: true,
        },
        xAxis: {
          data: ["a", "x", "b"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          max: bodyMax,
          splitLine: {
            show: false,
          },
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLine: {
            // 轴线
            show: false,
          },
          axisLabel: {
            // 轴坐标文字
            show: false,
          },
        },
        series: [
          {
            name: "今日",
            type: "pictorialBar",
            symbolClip: true,
            symbolBoundingData: bodyMax,
            label: labelSetting,
            data: [
              {
                value: data.man_ratio,
                symbol: symbols[0],
                itemStyle: {
                  normal: {
                    color: "rgba(105,204,230)", //单独控制颜色
                  },
                },
              },
              {},
              {
                value: data.woman_ratio,
                symbol: symbols[1],
                itemStyle: {
                  normal: {
                    color: "rgba(255,130,130)", //单独控制颜色
                  },
                },
              },
            ],
            // markLine: markLineSetting,
            z: 10,
          },
          {
            // 设置背景底色，不同的情况用这个
            name: "full",
            type: "pictorialBar", //异型柱状图 图片、SVG PathData
            symbolBoundingData: bodyMax,
            animationDuration: 0,
            itemStyle: {
              normal: {
                color: "#ccc", //设置全部颜色，统一设置
              },
            },
            z: 10,
            data: [
              {
                itemStyle: {
                  normal: {
                    color: "rgba(105,204,230,0.40)", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[0],
              },
              {
                // 设置中间冒号
                itemStyle: {
                  normal: {
                    color: "#1DA1F2", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[2],
                // symbolSize: [8, '18%'],
                symbolOffset: [0, "-200%"],
              },
              {
                itemStyle: {
                  normal: {
                    color: "rgba(255,130,130,0.40)", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[1],
              },
            ],
          },
        ],
      };
      warning.setOption(options1);
    },
    // 初始化全部图表
    createChart() {
      let that = this;
      // const chart = this.$echarts.init(document.getElementById("chart"));
      const main = this.$echarts.init(document.getElementById("dgl"));
      const warning = this.$echarts.init(document.getElementById("warning"));
      const option = {
        backgroundColor: "#FFFFFF",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
            label: {
              width: 100,
            },
          },
          formatter: function (params) {
            return `<span style=" font-weight: bold;width:100px;display:inline-block;">今日数据：${params[0].data}</span>`;
          },
        },
        grid: {
          top: "8%",
          left: "1%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            nameLocation: "center",
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              nameLocation: "center",
              // backgroundColor: "red",
              lineStyle: {
                color: "#00B3FE",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              rotate: 45, // 旋转角度
              interval: 0, // 强制显示所有标签
              textStyle: {
                // color: "#13213B",
                color: "#13213B",
                // borderColor: "red",
                // borderWidth: 1,
                // width: 100,
                // overflow: "breakAll",
                padding: [10, 0, 10, 0],
              },
            },
            axisTick: {
              show: false,
            },
            data: this.imgDate,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 300,
            // splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#00B3FE",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0, 179, 254, 1)",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                color: "#13213B",
              },
              formatter: "{value}",
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "bar",
            barGap: "10",
            barCategoryGap: "10",
            barWidth: 16,
            tooltip: {
              show: true,
            },

            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x1: 0,
                  y1: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2785FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00F6FF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: this.imgNum,
          },
        ],
      };

      // ============================
      // that.changeFxx();
      // 初始化访客人员
      // ==========+

      // =================================
      imageTextData(this.imgText).then((res) => {
        // console.log(res);
        res.forEach((item) => {
          // console.log(item);
          that.imgDate.push(item.date);
          that.imgNum.push(item.count);
        });
        // console.log(this.imgDate);
        // console.log(this.imgNum);
        main.setOption(option);
      });
      // warning.setOption(options1);
      // yjxx.setOption(optionYjxx);
    },

    // 初始化预警信息
    async initYjxx() {
      await clicmData(this.yjParmas).then((res) => {
        if (res.code == 200) {
          this.yjxx[0].num = res.data.allCount;
          this.yjxx[1].num = res.data.yichuliCount;
          this.yjxx[2].num = res.data.weichuliCount;
          this.yjType[0].num = res.data.xiaochengxuCount;
          this.yjType[1].num = res.data.zhujiCount;
          this.yjType[2].num = res.data.renxiangCount;
          this.yjType[3].num = res.data.cheliangCount;
        }
      });
    },
    // 切换预警信息时间范围
    change1(index) {
      this.date1.forEach((item, i) => {
        if (i == index) {
          this.yjParmas.day = item.id;
          clicmData(this.yjParmas).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.yjxx[0].num = res.data.allCount;
              this.yjxx[1].num = res.data.yichuliCount;
              this.yjxx[2].num = res.data.weichuliCount;
              this.yjType[0].num = res.data.xiaochengxuCount;
              this.yjType[1].num = res.data.zhujiCount;
              this.yjType[2].num = res.data.renxiangCount;
              this.yjType[3].num = res.data.cheliangCount;
            } else {
              this.$messag({
                message: res.message,
                type: "error",
              });
            }
          });
          console.log(item.id);
          item.isActive = !item.isActive;
        } else if (i != index) {
          item.isActive = false;
        }
      });
    },
    // 图文上报
    change2(index) {
      console.log(index);
      let that = this;
      that.imgDate = [];
      that.imgNum = [];
      that.createImageBitmap(index);
    },
    change3(index) {
      console.log(index);
      let that = this;
      that.changeFxx(index);
    },
    change4(index) {
      console.log(index);
      this.date4.forEach((item, i) => {
        if (i == index) {
          console.log(item.time);
          this.fkSexParmas.day = item.id;
          visitorRatio(this.fkSexParmas).then((res) => {
            console.log(res);
            if (item.id == 7) {
              res.man_ratio = res.man_ratio.toFixed(1);
              res.woman_ratio = res.woman_ratio.toFixed(1);
            }
            this.zanbi = res;
            console.log(this.zanbi);
          });
          this.initSex(this.zanbi);
          item.isActive = !item.isActive;
        } else if (i != index) {
          item.isActive = false;
        }
      });
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
// active : nuActive
.active {
  color: #126bff;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 500;
}
.nuActive {
  color: #13213b;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 500;
}
.top-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top-info > div {
  display: flex;
  width: 19%;
  height: 100px;
  border-radius: 10px;
  background-color: white;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.top-info > div img {
  width: 77px;
  height: 75px;
}
.top-info > div > div {
  // border: 1px red solid;
  display: flex;
  flex: 1;
  text-align: left;
  vertical-align: middle;
  height: 100px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.eachats {
  // border: 1px red solid;
  border-radius: 15px;
  background-color: white;
  box-sizing: border-box;
  margin: 20px 0 20px 0;
  padding: 20px;
  height: 350px;
}
.schoolInfo {
  // border: 1px red solid;
  box-sizing: border-box;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
}

.typeNum {
  margin-left: 15px;
}
.typeNum h1 {
  font-size: 28px;
  font-family: Segoe UI-Semibold, Segoe UI;
  font-weight: 600;
  margin-left: 15px;
}
.a {
  color: #7896ff;
}
.b {
  color: #1883f7;
}
.c {
  color: #ff6c90;
}
.d {
  color: #a382ff;
}
.e {
  color: #ff802e;
}
.center {
  // border: 1px red solid;
  width: 100%;
  display: flex;
  height: 100%;
  box-sizing: border-box;
  min-width: 1000px;
}

.center > div:nth-of-type(1) {
  background-color: #fff;
  margin: 15px 15px 15px 0;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
}
.center > div:nth-of-type(2) {
  background-color: #fff;
  margin: 15px 0 15px 0;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
  width: 43%;
  flex: 1;
  // border: 1px red solid;
}
.title span {
  box-sizing: border-box;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  line-height: 8px;
  background: #126bff;
  opacity: 1;
  margin: 4px;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
/deep/.el-table td.el-table__cell div {
  text-align: center;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #13213b;
}
.yj {
  // border: 1px red solid;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top > div:nth-of-type(2) {
  // border: 0 1px 0 1px red solid;
  border-right: 1px rgba(196, 196, 207, 1) solid;
  border-left: 1px rgba(196, 196, 207, 1) solid;
}
.yj:nth-of-type(1) {
  height: 50%;
  div {
    // border: 1px red solid;
    width: 30%;
    height: 100px;
    line-height: 50px;
  }
}
.yj:nth-of-type(1) > div > span:nth-of-type(1) {
  width: 95px;
  height: 25px;
  font-size: 19px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #13213b;
  // color: #13213b;
}
.yj:nth-of-type(1) > div > span:nth-of-type(2) {
  width: 64px;
  height: 46px;
  font-size: 35px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
.yj:nth-of-type(2) {
  flex: 1;
  color: red;
  height: 50%;
  div {
    // border: 1px red solid;
    height: 50px;
    width: 100px;
    // background: #39bfcd;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    text-align: center;
  }
  // span {
  //   // border: 1px red solid;
  //   display: flex;
  //   align-items: center;
  //   // line-height: 50px;
  //   word-wrap: break-word;
  // }
}

.yj:nth-of-type(2) > div:nth-of-type(1) {
  background-color: #39bfcd;
  display: flex;
  justify-content: space-between;
  word-wrap: break-word;
}
.yj:nth-of-type(2) > div:nth-of-type(2) {
  background-color: #fba936;
}
.yj:nth-of-type(2) > div:nth-of-type(3) {
  background-color: #444460;
}
.yj:nth-of-type(2) > div:nth-of-type(4) {
  background-color: #959ab8;
}

.title {
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
  text-align: left;
}
.bottom {
  // border: 1px red solid;
  height: 400px;
  display: flex;
}
.bottom > div {
  border-radius: 16px;
  background: #ffffff;
  // border: 1px blue solid;
  overflow: hidden;
  margin: 0px 0 15px 15px;
  width: 50%;
}
.bottom > div:nth-child(1) {
  margin: 0px 0 15px 0px;
}
#dgl {
  width: 120%;
  // width: auto;
  height: 300px;
  // border: 1px red solid;
  border-radius: 16px;
  background: #ffffff;
}
/deep/#dgl > div {
  width: 100px !important;
  canvas {
    width: 100%;
  }
}
#warning {
  width: 100%;
  // width: auto;
  height: 360px;
  // border: 1px red solid;
  border-radius: 16px;
  background: #ffffff;
}
#yjxx {
}
#abnormal {
  width: 140%;
  // width: auto;
  height: 300px;
  // border: 1px red solid;
  border-radius: 16px;
  background: #ffffff;
}
.changeDate {
  width: 148px;
  height: 30px;
  line-height: 30px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #d7dbe3;
  float: right;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 滚动条高度 */
  background-color: #f5f5f5; /* 滚动条背景色 */
}

/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 滚动条轨道背景色 */
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  border-radius: 6px; /* 滑块圆角 */
  background-color: #c1c1c1; /* 滑块颜色 */
}
</style>
